<template>
  <div class="banner-warp">
    <swiper :options="swiperOption">
        <swiper-slide v-for="item in banners" :key="item.id" class="swiper-item">
          <router-link :to="'/app/home/productDetail/'+item.url" target = _blank><img :src="item.img" alt=""  style="width: 100%;"/></router-link>
        </swiper-slide>
        <div class="swiper-pagination paginationDesign" slot="pagination"></div>
      <div class="swiper-button-prev swiper_btn"></div>
      <div class="swiper-button-next swiper_btn"></div>
    </swiper>
  </div>
</template>
<style>
  .banner-warp{
    height:300px;
  }
</style>



<script>
  // import {bannerGoods} from '../../api/api'

  export default {
    data() {

      return {

        swiperOption: {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          autoplay: 2500,
          autoplayDisableOnInteraction: false,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
        },
        banners:[]

      }

    },
    methods:{
      getBanner(){
        // bannerGoods().then((response)=> {
        //     console.log(response)
        //     // 跳转到首页页response.body面
        //     this.banners = response.data
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   });

          //mock
          this.$http.post("/getBanner").then(res=>{
              this.banners = res.data
          })
      }
    },
    created(){
      this.getBanner();
    }

  }

</script>

<style scoped>
  .banner-warp{
    height: 400px;
  }
  .swiper-item{
    position: relative;
  }
  .paginationDesign{
    position: absolute;
    bottom: 30px;
  }
</style>
